<template>
  <span :class="`icon icon-${suffix}`"></span>
</template>
<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps<{
  type: string
}>();
const officeIcon = ['xlsx', 'xls', 'doc', 'docx', 'pdf', 'ppt', 'pptx']
const suffix = computed({
  get() {
    return officeIcon.includes(props.type) ? props.type : 'default';
  },
  set() { }
})
</script>
<style lang="scss" scope>
.icon,
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothin: grayscale;
}
</style>
